<template>
    <!-- html -->
    <div class="Tores">
        <h3>this is Car</h3>
        <h3>{{ brand }} : {{ price }}</h3>
        <button @click="changePrece">点击</button>
        <button @click="changebrand">点击</button>
    </div>
</template>



<!-- npm i vite-plugin-vue-setup-extend -D -->
<script lang="ts" setup name='Person'>
import { reactive, toRefs } from 'vue';
let car = reactive({ brand: '奔驰', price: 100 })

let { brand, price } = toRefs(car)

function changePrece() {
    price.value += 1
    // console.log(price.value,car.price)
}

// console.log(1)

function changebrand() {
    brand.value += '~'
}
</script>

<style>
/* 样式 */
.Tores {
    background-color: skyblue;
    border-radius: 10px;
    padding: 20px;
}
</style>